<template>
	<view>
		<view class="uni-header">
			<view class="uni-group">
				<view class="uni-title"></view>
				<view class="uni-sub-title"></view>
				<el-button type="success" size="mini" @click="navigateTo('./add')">新增</el-button>
				<el-button class="uni-button" type="default" size="mini" @click="navigateTo('./statistics')">统计信息
				</el-button>
			</view>
			<view class="uni-group">
				<input class="uni-search" type="text" v-model="query" placeholder="请输入搜索内容" />
				<el-button type="default" size="mini" @click="search">搜索</el-button>
			</view>
		</view>
		<view class="uni-container">
			<unicloud-db ref="udb" :collection="collectionName" :options="options" :where="where" page-data="replace"
				:orderby="orderby" :getcount="true" :page-size="options.pageSize" :field="fields"
				:page-current="options.pageCurrent" v-slot:default="{ data, pagination, loading, error }">
				<el-table :data="data" style="width: 100%">
					<el-table-column prop="avatar" label="头像" width="80">
						<template v-slot="{ row }">
							<el-image :src="row.avatar" :preview-src-list="[row.avatar]"></el-image>
						</template>
					</el-table-column>
					<el-table-column prop="paramedic_profile.name" label="姓名" fixed></el-table-column>
					<el-table-column prop="mobile" label="电话" width="100"></el-table-column>
					<el-table-column prop="paramedic_profile.id_card_no" label="身份证号" width="150"></el-table-column>
					<el-table-column prop="paramedic_profile.id_card" label="身份证照片" width="180">
						<template v-slot="{ row }">
							<el-row :gutter="16">
								<el-col :span="6">
									<el-image style="width: 40px;height: 40px;"
										:src="row.paramedic_profile.id_card_front" fit="cover"
										:preview-src-list="[row.paramedic_profile.id_card_front]"></el-image>
								</el-col>
								<el-col :span="6">
									<el-image style="width: 40px;height: 40px;"
										:src="row.paramedic_profile.id_card_back" fit="cover"
										:preview-src-list="[row.paramedic_profile.id_card_back]"></el-image>
								</el-col>
							</el-row>
						</template>
					</el-table-column>
					<el-table-column prop="paramedic_profile.id_card_issue" label="身份证发证机关" width="120">
					</el-table-column>
					<!-- <el-table-column prop="paramedic_profile.id_card_validity" label="身份证有效期" width="100">
						<template v-slot="{ row }">
							{{ row.paramedic_profile.id_card_start_date }} - {{ row.paramedic_profile.id_card_end_date }}
						</template>
					</el-table-column> -->
					<!-- <el-table-column prop="paramedic_profile.birthday" label="生日"></el-table-column>
					<el-table-column prop="paramedic_profile.zodiac" label="属相"></el-table-column>
					<el-table-column prop="paramedic_profile.constellation" label="星座"></el-table-column>
					<el-table-column prop="paramedic_profile.clan" label="名族"></el-table-column>
					<el-table-column prop="paramedic_profile.hometown" label="籍贯"></el-table-column> -->
					<el-table-column prop="paramedic_profile.education" label="学历"></el-table-column>
					<el-table-column prop="paramedic_profile.address" label="地址" width="200"></el-table-column>
					<!-- <el-table-column prop="paramedic_profile.bank_card" label="银行卡照片">
						<template v-slot="{ row }">
							<el-image
								style="width: 40px;height: 40px;"
								:src="row.paramedic_profile.bank_card"
								fit="cover"
								:preview-src-list="[row.paramedic_profile.bank_card]"
							></el-image>
						</template>
					</el-table-column> -->
					<!-- <el-table-column prop="paramedic_profile.bank_card_no" label="银行卡号" width="140"></el-table-column>
					<el-table-column prop="paramedic_profile.bank" label="开户银行" width="100"></el-table-column> -->
					<el-table-column prop="paramedic_profile.working_year" label="工作年限(年)"></el-table-column>
					<!-- <el-table-column prop="paramedic_profile.examination" label="体检报告">
						<template v-slot="{ row }">
							<el-row :gutter="16">
								<el-col :span="6" v-for="(item,indx) in row.paramedic_profile.examination" :key="indx">
									<el-image style="width: 40px;height: 40px;" :src="item" fit="cover" :preview-src-list="row.paramedic_profile.examination"></el-image>
								</el-col>
							</el-row>
						</template>
					</el-table-column> -->
					<!-- <el-table-column prop="paramedic_profile.certificates" label="专业证件" width="200">
						<template v-slot="{ row }">
							<el-row :gutter="16">
								<el-col :span="6" v-for="(item,indx) in row.paramedic_profile.certificates" :key="indx">
									<el-image style="width: 40px;height: 40px;" :src="item" fit="cover" :preview-src-list="row.paramedic_profile.certificates"></el-image>
								</el-col>
							</el-row>
						</template>
					</el-table-column> -->
					<!-- <el-table-column prop="paramedic_profile.photos" label="服务照片" width="200">
						<template v-slot="{ row }">
							<el-row :gutter="16">
								<el-col :span="6" v-for="(item,indx) in row.paramedic_profile.photos" :key="indx">
									<el-image style="width: 40px;height: 40px;" :src="item" fit="cover" :preview-src-list="row.paramedic_profile.photos"></el-image>
								</el-col>
							</el-row>
						</template>
					</el-table-column> -->
					<!-- <el-table-column prop="tag" label="状态" width="100" filter-placement="bottom-end">
						<template slot-scope="scope">
							<el-tag :type="scope.row.status | colorFilter" disable-transitions>
								{{ scope.row.status | statusFilter }}</el-tag>
						</template>
					</el-table-column> -->
					<el-table-column label="操作" width="300" fixed="right">
						<template v-slot="{ row }">
							<el-button size="mini" @click="navigateTo('./edit?id=' + row._id)" type="primary">编辑
							</el-button>
							<!-- // -->
							<el-button  size="mini" type="warning" v-if="false&&row.status==2" @click="checkDialog(row)">审核
							</el-button>
							<el-button size="mini" @click="navigateTo('./detail?id=' + row._id)" type="info">详情
							</el-button>
							<el-button @click="confirmDelete(item._id)" size="mini" type="danger">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<view class="uni-pagination-box">
					<uni-pagination show-icon :page-size="pagination.size" v-model="pagination.current"
						:total="pagination.count" @change="onPageChanged" />
				</view>
			</unicloud-db>
		</view>
		<view>
			<el-dialog title="审核" :visible.sync="dialogFormVisible">
				<el-form :model="checkForm" :rules="rules" ref="checkForm">
					<el-form-item label="审核状态" :label-width="formLabelWidth" prop="status">
						<el-radio-group v-model="checkForm.status">
							<el-radio :label="0">通过</el-radio>
							<el-radio :label="3">审核拒绝</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="审核原因" :label-width="formLabelWidth" prop="status_msg">
						<el-input v-model="checkForm.status_msg" :rows="5" placeholder="审核原因" style="width:400px"
							type="textarea" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="checkSubmit('checkForm')">确 定</el-button>
				</div>
			</el-dialog>
		</view>
	</view>
</template>
<script>
	const db = uniCloud.database();
	// 表查询配置
	const dbCollectionName = 'uni-id-users';
	const dbOrderBy = 'created_at desc'; // 排序字段
	const dbSearchFields = ['username', 'nickname', 'paramedic_profile.name']; // 支持模糊搜索的字段列表
	// 分页配置
	const pageSize = 15;
	const pageCurrent = 1;
	const typeMap = {
		0: '到全天服务',
		1: '时段服务'
	};
	const filtMap = {
		0: '已评论（订单结束）',
		1: '已付款（待服务）',
		2: '服务中',
		3: '服务结束',
		4: '已取消'
	};
	const statusMap = {
		0: {
			name: '正常',
			type: 'success'
		},
		1: {
			name: '禁用',
			type: 'danger'
		},
		2: {
			name: '审核中',
			type: 'warning'
		},
		3: {
			name: '审核拒绝',
			type: 'info'
		}
	};
	const fields =
		'_id,paramedics_id,status,paramedic_profile,mobile,type,tel,avatar,name,sex,age,level,exp_year,tags,identity_no,identity_img,zodiac,constellation,native_place,nation,education,examination,background_checks,certificates,introduce,comment,photos,care_item,training_records,arrangementsss';
	export default {
		filters: {
			typeFilter(type) {
				//0:到全天服务，1:时段服务
				return typeMap[type];
			},
			statusFilter(type, name) {
				if (!name) {
					name = 'name';
				}
				return statusMap[type]['name'];
			},
			colorFilter(type) {
				return statusMap[type]['type'];
			}
		},
		data() {
			return {
				innerVisible: false,
				formDataId: null,
				dialogFormVisible: false,
				checkForm: {
					check_user_id: '',
					status: 2,
					status_msg: null
				},
				formLabelWidth: '120px',
				fields: fields,
				query: '',
				where: 'role=="paramedic" && paramedic_profile!=null',
				orderby: dbOrderBy,
				collectionName: dbCollectionName,
				options: {
					pageSize,
					pageCurrent
				},
				rules: {
					status: [{
						required: true,
						message: '请选择审核状态',
						trigger: 'change'
					}],
					status_msg: [{
						required: true,
						message: '请填写审核原因',
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			checkSubmit(formName) {
				const that = this;
				this.$refs[formName].validate(valid => {
					if (valid) {
						db.collection(dbCollectionName)
							.doc(this.formDataId)
							.update(this.checkForm)
							.then(res => {
								that.$message({
									showClose: true,
									message: '恭喜你，审核成功',
									type: 'success'
								});
								that.dialogFormVisible = false;
								that.getOpenerEventChannel().emit('refreshData');
								setTimeout(() => uni.navigateBack(), 500);
							})
							.catch(err => {
								that.$message({
									showClose: true,
									message: '错了哦，请重试',
									type: 'error'
								});
							});
					} else {
						that.$message({
							showClose: true,
							message: '错了哦，请重试',
							type: 'error'
						});
						return false;
					}
				});
			},
			checkDialog(row) {
				this.formDataId = row._id;
				this.checkForm = {
					check_user_id: '',
					status: 2,
					status_msg: null
				};
				this.dialogFormVisible = true;
			},
			getWhere() {
				const query = this.query.trim();
				let sWhere = '';
				if (query) {
					const queryRe = new RegExp(query, 'i');
					sWhere = dbSearchFields.map(name => queryRe + '.test(' + name + ')').join(' || ');
				}
				return sWhere;
			},
			search() {
				const newWhere = this.getWhere();
				const isSameWhere = newWhere === this.where;
				this.where = newWhere;
				if (isSameWhere) {
					// 相同条件时，手动强制刷新
					this.loadData();
				}
			},
			loadData(clear = true) {
				this.$refs.udb.loadData({
					clear
				});
			},
			onPageChanged(e) {
				this.$refs.udb.loadData({
					current: e.current
				});
			},
			navigateTo(url) {
				uni.navigateTo({
					url,
					events: {
						refreshData: () => {
							this.loadData();
						}
					}
				});
			},
			// 多选处理
			selectedItems() {
				var dataList = this.$refs.udb.dataList;
				return this.selectedIndexs.map(i => dataList[i]._id);
			},
			//批量删除
			delTable() {
				this.$refs.udb.remove(this.selectedItems());
			},
			// 多选
			selectionChange(e) {
				this.selectedIndexs = e.detail.index;
			},
			confirmDelete(id) {
				this.$refs.udb.remove(id);
			}
		}
	};
</script>
<style lang="scss">
	.suoluetu {
		width: 100rpx;
		height: 100rpx;
	}
</style>
